<template>
	<view class="new_record">
		<view class="head_veiw" :style="{backgroundImage:'url('+headBg+')'}" :class="headHeight">
			<view class="headMenu">
				<view class="head_item" v-for="(item,index) in headMenus"
					:class="headSelectIndex == index ? 'selected' : 'no_select'" @click="headSelectEvent(index)">
					{{item.name}}
				</view>
			</view>
			<view class="time_content" v-if="headSelectIndex == 3">
				<view class="start_time">
					<dyDatePicker @getData="getStart" :childValue="initialTime" placeholder="请选择日期"
						minSelect="2000/01/01" maxSelect="2025/12/31"></dyDatePicker>
				</view>
				<view class="zhi">至</view>
				<view class="start_time right">
					<dyDatePicker @getData="getEnd" :childValue="initialTime" placeholder="请选择日期" minSelect="2000/01/01"
						maxSelect="2025/12/31"></dyDatePicker>
				</view>
			</view>
			<view class="team-select">
					<view class="new_num" v-if="toolsTpye == 1">新增用户{{addDay}}人</view>
					<view class="team_view"  v-if="toolsTpye == 2">
						<view class="team_item one" :class="secondSelectIndex == 0 ? 'select' : 'no_select'" @click="secondSelectEvent(0)">新增{{teamData.team}}</view> 
						<view class="team_item two" :class="secondSelectIndex == 1 ? 'select' : 'no_select'" @click="secondSelectEvent(1)">直推{{teamData.direct}}</view> 
						<view class="team_item three" :class="secondSelectIndex == 2 ? 'select' : 'no_select'" @click="secondSelectEvent(2)">间推{{teamData.interposition}}</view> 
					</view> 
			</view>
		</view>
		
		<mescroll-uni @getData="getListData" @init="mescrollInit" class="member-point" ref="mescroll" :top="mescroll_top_height">
			<view slot="list">
				<block v-if="listData.length > 0">
					<view class="list_view">						
						<view class="item" v-for="(item,index) in listData" :key="index">							
							<view class="item_centent">
								<view class="info_view">
									<image :src="item.headimg ? $util.img(item.headimg) : $util.getDefaultImage().default_headimg"></image>
									<view class="name_view" v-if="toolsTpye == 2">{{item.fenxiao_name}}</view>
									<view class="name_view" v-if="toolsTpye == 1">{{item.nickname}}</view>
								</view>
								<view class="t_view" v-if="toolsTpye == 2">{{$util.timeStampTurnTime(item.create_time,100)}}</view>
								<view class="t_view" v-if="toolsTpye == 1">{{$util.timeStampTurnTime(item.reg_time,100)}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<ns-empty text="暂无相关数据" :isIndex="!1" :fixed="!1"></ns-empty>
				</block>
			</view>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import dyDatePicker from '../components/lanxiujuan-dyDate/lanxiujuan-dyDate.vue';
	export default {
		components: {
			dyDatePicker
		},
		data() {
			return {
				toolsTpye:'',////1、用户新增记录 ；2、团队新增记录
				headMenus: [{
						name: '今天',
						type:0
					}, {
						name: '近七天',
						type:1
					},
					{
						name: '近30天',
						type:2
					},
					{
						name: '自定义',
						type:3
					}
				],
				headSelectIndex: 0,
				initialTime: '', //自定义起始时间
				startTime: '',
				endTime: '',
				secondSelectIndex:0,
				listData:[],
				mescroll:null,
				teamData:{},
				addDay:''
			}
		},
		computed:{
			mescroll_top_height(){
				if(this.headSelectIndex == 3){
					return 270
				}else{
					return 190
				}
			},
			headBg(){
				if(this.headSelectIndex == 0){
					return this.$util.img('public/uniapp/h5/fenxiao/img/new_record_headbg_one_icon.png')
				}else if(this.headSelectIndex == 1){
					return this.$util.img('public/uniapp/h5/fenxiao/img/new_record_headbg_two_icon.png')
				}else if(this.headSelectIndex == 2){
					return this.$util.img('public/uniapp/h5/fenxiao/img/new_record_headbg_three_icon.png')
				}
				return this.$util.img('public/uniapp/h5/fenxiao/img/new_record_headbg_four_icon.png')
			},
			headHeight(){
				if(this.headSelectIndex == 3){
					return 'height'
				}
				return 'normal'
			}
		},
		onLoad(e){
			this.toolsTpye = e.toolsTpye
			let title = '用户新增记录'
			if(e.toolsTpye == 2){
				title = '团队新增记录'
			}
			this.getinitialTime()
			uni.setNavigationBarTitle({
				title:title
			})
		},
		methods: {
			/* 列表数据 */
			getListData(mescroll){
				this.mescroll = mescroll
				let url = '/fenxiao/api/fenxiao/getTeamRecord'
				let params = {
					page: mescroll.num,
					page_size: mescroll.size,
					type:this.headMenus[this.headSelectIndex].type,
					start_time:this.startTime,
					end_time:this.endTime,
					status:this.secondSelectIndex
				}
				if(this.toolsTpye == 1){
					url = '/fenxiao/api/fenxiao/getMemberlist'
					params = {
						page: mescroll.num,
						page_size: mescroll.size,
						status:0,
						type:this.headSelectIndex,
						start_time:this.startTime,
						end_time:this.endTime
					}
				}
				this.$api.sendRequest({
					url:url,
					data: params,
					success: res => {
						if (res.code == 0) {
							let newArr = [];
							newArr = res.data.list;
							mescroll.endSuccess(newArr.length);
							if (mescroll.num == 1) this.listData = []; //如果是第一页需手动制空列表
							this.listData = this.listData.concat(newArr); //追加新数据
							mescroll.endBySize(this.listData.length, res.data.count)
							if(this.toolsTpye == 1){
								this.addDay = res.data.data.day
							}else{
								this.teamData = res.data.data
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail:res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			/* 头部菜单选择 */
			headSelectEvent(index) {
				this.headSelectIndex = index
				this.mescroll.resetUpScroll()
			},
			/* 团队新增记录次级菜单 */
			secondSelectEvent(index){
				this.secondSelectIndex = index
				this.mescroll.resetUpScroll()
			},
			/* 获取当天时间 */
			getinitialTime() {
				let time = new Date()
				let y = time.getFullYear()
				let m = time.getMonth() + 1
				let d = time.getDate()
				this.initialTime = y + '-' + m + '-' + d
				/* 默认传当天的数据 */
				this.startTime = this.initialTime
				this.endTime = this.initialTime
			},
			/* 开始时间选择 */
			getStart(time) {
				this.startTime = time
				if(this.endTime){
					this.mescroll.resetUpScroll()
				}
			},
			/* 结束时间选择 */
			getEnd(time) {
				this.endTime = time
				if(this.startTime){
					this.mescroll.resetUpScroll()
				}
			},

		},
	}
</script>

<style lang="scss">
	.new_record {
		.height{
			height: 423rpx;
		}
		.normal{
			height: 331rpx;
		}
		.head_veiw {
			background-size: cover;

			.headMenu {
				display: flex;
				padding-bottom: 20rpx;

				.head_item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 25%;
					height: 90rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #463510;
					line-height: 48rpx;

					&.selected {
						font-size: 32rpx;
					}

					&.no_select {
						font-size: 28rpx;
					}
				}

			}

			.time_content {
				padding: 20rpx 108rpx;
				display: flex;
				height: 40rpx;
				text-align: center;

				.start_time {
					width: 240rpx;
					height: 40rpx;
					position: relative;

					&:after {
						width: 200rpx;
						height: 2rpx;
						background: #C79F45;
						position: absolute;
						content: '';
						left: 20rpx;
						bottom: -12rpx;
						z-index: 5;
					}
				}

				.right {
					text-align: center;
				}

				.zhi {
					margin-top: 6rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #463510;
					line-height: 40rpx;
				}
			}
		}
		.list_view{
			padding: 0rpx 30rpx;
			.item{
				border-radius: 8rpx;
				background: #fff;
				margin-bottom: 20rpx;				
			  .item_centent{
					padding: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.info_view{
						display: flex;
						align-items: center;
						image{
							width: 72rpx;
							height: 72rpx;
							border-radius: 36rpx;
						}
						.name_view{
							max-width: 300rpx;
							margin-left: 12rpx;
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #303133;
							line-height: 40rpx;
						}
					}
					.t_view{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
					}
				}
			}
		}		
	}
	
	.team-select {
		border-radius: 8rpx;
		background: #fff;
		width: 80%;
		margin: auto;
		overflow: hidden;
		.new_num{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 64rpx;
			background: #C79F45;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #463510;
			line-height: 45rpx;
		}
		.team_view{
			display: flex;
			.team_item{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 33%;
				height: 64rpx;
			}
			.one{
				&.select{
					background: #C79F45;
					border-radius: 8rpx 0rpx 0rpx 0rpx;
				}
				&.no_select{
					height: 61rpx;
					border: 1rpx solid #C79F45;
					border-radius: 8rpx 0rpx 0rpx 0rpx;
				}
			}
			.two{
				&.select{
					background: #C79F45;
				}
				&.no_select{
					height: 61rpx;
					border: 1rpx solid #C79F45;
				}
			}
			.three{
				&.select{
					background: #C79F45;
					border-radius: 0rpx 8rpx 0rpx 0rpx;
				}
				&.no_select{
					height: 61rpx;
					border: 1rpx solid #C79F45;
					border-radius: 0rpx 8rpx 0rpx 0rpx;
				}
			}
			
		}
	}
	
	
</style>
